<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/detail.css">
    <link rel="stylesheet" href="lib/tocbot/tocbot.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/myhead.js"></script>
    <style>
        .qing{
            border: 1px solid red !important;
        }
    </style>
</head>
<body>
<div id="app">
    <myhead>
        <template #nologined>
            <a href="login.html">登录</a>
            <el-link type="primary">注册</el-link>
        </template>
        <template #logined="props">
        </template>
    </myhead>
    <div class="center">
      <div class="center_box">
          <div class="center_top">
              <div class="center_top_left"><a href="index.html">网站首页</a></div>
              <div class="center_top_right">{{typeinfo.tname}}</div>
          </div>
          <div class="center_bottom">
              <div class="center_bottom_left">
                  <div class="center_bootom_left_userinfo">
                      <h2>{{artist.title}}</h2>
                      <div class="userinfo">
                          <span class="type"><i class="el-icon-bank-card"></i>&nbsp;{{typeinfo.tname}}</span>
                          <span class="time"><i class="el-icon-timer"></i>&nbsp;{{artist.adate}}</span>
                          <span class="view"><i class="el-icon-view">&nbsp;</i>&nbsp;{{artist.view}}</span>
                          <span class="likes"><img style="width: 20px;height: 20px" src="image/back/ai.png">&nbsp;{{artist.likes}}</span>
<!--                          <span class="likes"><i class="el-icon-location-outline"></i>&nbsp;{{artist.address}}</span>-->
                      </div>
                  </div>
                  <div class="center_bottom_left_image">

                      <div class="demo-image__preview">
                          <el-image
                                  style="width: 300px; height: 200px;margin-left: 300px"
                                  :src="artist.pic"
                                  :preview-src-list="[artist.pic]">
                          </el-image>
                      </div>
                  </div>
                  <div class="center_bottom_left_center js-toc-content" v-html="artist.content" style="padding: 20px 20px">
                  </div>
                  <div class="admire" v-if="usid!=uid">
                      <div class="shang" @click="zanShang">赞赏</div>
                      <div class="shou" v-if="favorite.fav==null||favorite.fav==''"><i class="el-icon-star-off" @click="getFav"></i>&ensp;收藏</div>
                      <div class="shou" v-else><i class="el-icon-star-on" @click="getFav"></i>&ensp;收藏</div>
                      <div class="cai" @click="downLike(2)" v-if="evaluate.stamp"><i class="el-icon-error"></i>&ensp;踩</div>
                      <div class="cai" @click="downLike(2)" v-else><i class="el-icon-circle-close"></i>&ensp;踩</div>
                      <div class="zan" @click="downLike(1)" v-if="evaluate.giveLike"><i class="el-icon-success"></i>&ensp;赞</div>
                      <div class="zan" @click="downLike(1)" v-else><i class="el-icon-circle-check"></i>&ensp;赞</div>
                  </div>
                  <div v-else></div>
              </div>
              <div class="center_bottom_right">
                  <div class="center_bottom_right_user">
                      <div class="center_bottom_right_user_wall"></div>
                      <div class="center_bottom_right_user_userinfo" >
                          <div class="head" >
                              <img @click="tiao" v-if="this.userinfo!=null&&this.userinfo!=''" :src="userinfo.photo">
                          </div>
                          <p class="name" v-if="this.userinfo!=null&&this.userinfo!=''">{{userinfo.uname}}</p>
                          <p  class="descript">{{userinfo.descript==''||userinfo.descript==null?"该用户很懒，还没有留下任何东西":userinfo.descript}}</p>
                          <div v-if="usid!=uid" class="guan" @click="attention">{{this.guanzhu}}</div>
                          <div v-if="usid!=uid" class="message" @click="chat">发消息</div>
                      </div>
                  </div>
                  <div class="center_bottom_right_type">
                      <div class="box_right_top_type">博主推荐</div>
                      <div class="box_right_top_content">
                          <ul>
                              <li v-for="item in blogger">
                                  <div style="width: 80px;height:100%;float: left">
                                      <el-avatar :size="70" style="margin-top: 2px" :src="item.userinfo.photo"></el-avatar>
                                  </div>
                                  <div style="width: 120px;height:100%;float: left">
                                      <h3>{{item.userinfo.uname}}</h3>
                                      <p>{{item.userinfo.descript==null||item.userinfo.descript==''?'还没有简介':item.userinfo.descript.substring(0,6)}}</p>
                                  </div>
                                  <div style="width: 100px;margin-right:20px;height:100%;float: right">
                                      <el-button @click="blogUserAttention(item.userinfo.usid)" v-if="item.flag==false" style="margin-top: 20px">关&ensp;注</el-button>
                                      <el-button disabled v-if="item.flag" style="margin-top: 20px">已关注</el-button>
                                  </div>

                              </li>
                          </ul>
                      </div>
                  </div>
                  <div class="center_bottom_right_tag">
                      <div class="box_right_bottom_type">好文推荐</div>
                      <div class="box_right_bottom_content">
                          <ul>
                              <li v-for="item in Goodrecommendation" @click="goAart(item.aid)"><a href="javascript:void(0)" >{{item.title}}</a></li>
                          </ul>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    </div>
    <div class="comment_top">
        <p id="comment_container"><span class="comment_red" >{{this.comment.length}}</span>条评论</p>
        <aa :data="comment" @re="getre">

           <!-- <template #replyed="props">

                <p v-model="props.replayContent.cid">{{props.replayContent.cid}}</p>
                <p v-model="props.replayContent.unam">{{props.replayContent.uname}}</p>
            </template>-->
        </aa>
    </div>
    <!--<div class="comment_top">
        <p><span class="comment_red" >{{this.comment.length}}</span>条评论</p>
        <div class="com" v-for="item in comment">
            <div class="com_head">
                <img :src="item.userinfo.photo">
            </div>
            <div class="com_conect">
                <p class="com_conect_time" style="font-weight: normal">{{item.time }}<span @click="reply(item.id,item.userinfo.uname)">回复</span></p>
                <p class="com_conect_name" style="font-weight: normal">{{item.userinfo.uname}}</p>
                <p class="com_conect_content">{{item.content }}</p>
            </div>
        </div>
    </div>-->
    <div class="comment_bottom">
        <p>发表评论</p>
        <textarea placeholder="既然来了，那就留下点什么吧。" v-model="replayContent.content"></textarea>
        <button @click="send">发&nbsp;表</button>
    </div>

    <div style="position: fixed;right: 10px;bottom: 10px">
            <el-popover
                    placement="top-start"
                    title="目录"
                    width="200"
                    trigger="hover"
                   >
                <div style="width: 100px;height: 100px">
                    <ol class="js-toc">

                    </ol>
                </div>
                <el-button slot="reference">目录</el-button>
            </el-popover>
        <div style="margin-top: 5px"><a href="#comment_container"><el-button type="primary" >留言</el-button></a> </div>
        <div  style="margin-top: 5px"> <el-button type="info" style="text-align: center">&nbsp;&nbsp;<i class="el-icon-mobile-phone">&nbsp;&nbsp;</i></el-button></div>
        <div  style="margin-top: 5px"><el-button type="info" style="text-align: center"> &nbsp;&nbsp;<a href="#"><i class="el-icon-top">&nbsp;&nbsp;</i></a></el-button></div>
    </div>

    <div class="footer">
        <div class="er"></div>
        <div class="newBlog">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">最近博客</p>
            <p style="margin-top: 10px">用户故事(User Strory)</p>
            <p style="margin-top: 10px"> 关于刻意联系的清单</p>
            <p style="margin-top: 10px">失败要趁早</p>
        </div>
        <div class="lian">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">联系我们</p>
            <p style="margin-top: 10px">Email：2435939131@qq.com</p>
            <p style="margin-top: 10px">QQ：2435939131</p>
        </div>
        <div class="lie">
            <p style="margin-top: 60px;font-size: 18px;font-weight: bold">Lirenmi</p>
            <p style="margin-top: 10px">这是我的个人博客、会分享关于编程、写作、思考相关的任何</p>
            <p style="margin-top: 10px">内容，希望可以给来到这儿的人有所帮助...</p>
        </div>
    </div>

    <!--弹框-->

    <el-dialog
            title="提示"
            :visible.sync="dialogVisible"
            width="30%"
            center>
        <div :class="rewardItem == item ? 'qing' : ''" @click="reward(item)" style="width: 40px;cursor:pointer;height: 40px;float:left;border:1px solid gray;line-height: 40px;text-align: center;margin: 40px 38px"
             v-for="item in balancesArr">
            {{item}}</div>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="Play">确 定</el-button>
  </span>
    </el-dialog>
   </div>


<script src="lib/tocbot/tocbot.min.js"></script>
<script>

    tocbot.init({
        // Where to render the table of contents.
        tocSelector: '.js-toc',
        // Where to grab the headings to build the table of contents.
        contentSelector: '.js-toc-content',
        // Which headings to grab inside of the contentSelector element.
        headingSelector: 'h1, h2, h3',
        // For headings inside relative or absolute positioned containers within content.
        hasInnerContainers: true,
    });

    Vue.component("aa",{
        props:["data"],

        template:`
          <div >
          <div v-for="item in data" :style="item.cid==null?'':'margin-left:30px'">
            <slot v-bind:replayContent="replayContent" name="replyed"></slot>
            <div class="com" >
              <div class="com_head">
                <img :src="item.userinfo.photo">
              </div>
              <div class="com_conect">
                <p class="com_conect_time" style="font-weight: normal">{{item.time.replace("T"," ")}}<template><span @click="reply(item.id,item.userinfo.uname)">回复</span></template></p>
                <p class="com_conect_name" style="font-weight: normal">{{item.userinfo.uname}}</p>
                <p class="com_conect_content">{{item.content }}</p>
              </div>
            </div>
            <template v-if="item.commentList!=null">
              <aa :data="item.commentList" @re="getre">
              </aa>
            </template>

          </div>
          </div>
        `,
        data(){
            return{
                replayContent:{cid:'',uname:''},
                usid:"",
                loginedinfo:''
            }
        },
        methods: {
            info(){
                var jwt=sessionStorage.getItem("jwt");
                axios.get("blog-user/userinfo/myinfo",{
                    headers:{
                        Authorization: jwt,
                    }
                }).then(res=>{
                    if(res.data.code==-1){
                        this.userinfo=null;
                    }else{
                        this.usid=res.data.data.usid;
                        this.loginedinfo=res.data.data;
                        console.log(this.usid)
                    }
                })
            },
            getre(replayContent){
                this.replayContent.cid=replayContent.cid;
                this.replayContent.uname=replayContent.uname
                this.$emit('re',this.replayContent);
            },
            //点击回复
            reply(id,name){
                this.$root.replyid = id;

                if(this.loginedinfo==null||this.loginedinfo==''){
                    alert("你还没有登录不能进行该操作");
                }else{
                    this.replayContent.cid=id;
                    this.replayContent.uname=name
                    this.$emit('re',this.replayContent);
                    sessionStorage.setItem("cid",id);
                    sessionStorage.setItem("uname",name);
                }
            },

        },

        created() {
            this.info();
        }
    })



    let app=new Vue({
        el:"#app",
        data:{
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            srcList: [
                'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
            ],
            aid:'',
            artist:'',
            userinfo:'',
            typeinfo:'',
            loginedinfo:'',
            guanzhu:'关注',
            usid:'',
            uid:'',
            comment:[],
            replayContent:{cid:'',uname:'',content:''},
            favorite:{fav:''},
            dialogVisible: false,
            balancesArr:[1,3,5,10],
            rewardItem:'',
            evaluate:{giveLike:false,stamp:false}  , //点赞或者踩
            Goodrecommendation:'',                   //好文推荐
            blogger:'',                              //博主推荐
            pingFlag:false,                          //评论权力
            zanFlag:false,                           //赞赏权力

        },

        methods:{
            tiao(){
              if(this.usid!=this.uid){
                  location.href="user.html?"+this.uid;
              }
            },

            zanShang(){
                if(this.usid==''||this.usid==null){
                alert("你还没有登录，请先登录在进行操作");
                location.href="login.html";
            }
                if (this.zanFlag==false){
                    this.$message.error("该博客博主还没有开发打赏功能，还不能进行该操作");
                }else{
                    this.dialogVisible=true;
                }
            },

            goAart(id){
                location.href="detail.html?"+id;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            chat(){
                if(this.usid==''||this.usid==null){
                    alert("你还没有登录，请先登录在进行操作");
                    location.href="login.html";
                }else{
                    location.href="chat.html?"+this.uid;
                }
            },

            //查找评论
            selectByid(){
                axios.post(`commetn/selectByid?bid=${this.aid}`).then(res=>{
                    this.comment=res.data;
                })
            },
            //发表评论
            send(){
                if(this.usid==''||this.usid==null){
                    alert("你还没有登录，请先登录在进行操作");
                    location.href="login.html";
                }
               let po=this.artist.power.split(";")
                po.forEach(e=>{
                   if("评论"==e){
                       this.pingFlag=true;
                   }
                });
                if(this.pingFlag==false){
                    this.$message.error("该博客博主还没有开发评论功能，还不能进行评论");
                    this.replayContent="";
                    return;
                }
                axios.post(`commetn/insertComment?usid=${this.usid}&bid=${this.aid}`,this.replayContent).then(res=>{
                    if(res.data.code==1){
                        this.$message.success(res.data.message);
                    }else{
                        this.$alert(res.data.message);
                    }
                    this.selectByid();
                    this. replayContent={cid:'',uname:'',content:''};
                })
            },

            getAid(){
              this.aid=location.search.replace("?","");
            },
            //根据aid来查找对应的数据
            getArtByid(){
                axios.post(`getArtByid?aid=${this.aid}`).then(res=>{
                   this.artist=(res.data.data.data);
                   this.typeinfo=res.data.data.data.typeinfo;
                   this.userinfo=res.data.data.data.userinfo;
                   this.uid=this.userinfo.usid;
                   this.myinfo();
                   this.getBlogByType();
                   this.getUserByMore();
                   let po=this.artist.power.split(";")
                    po.forEach(e=>{
                        if("赞赏"==e){
                            this.zanFlag=true;
                        }
                    });
                })
            },
            //查找有没有关注该博主
            selectGuan() {
                axios.post(`fired/guan?usid=${this.usid}&uid=${this.uid}`).then(res=>{
                   if(res.data.data==null||res.data.data==''){
                       this.guanzhu="关注"
                   }else{
                       this.guanzhu="已关注";
                   }
                })
            },
            //点击关注博主
            attention(){
                if(this.guanzhu=="关注"){
                    if(this.userinfo==null||this.userinfo==''){
                        alert("你还没没有登录，请先登录在操作")
                            location.href="login.html";
                        return;
                    }
                    axios.get(`fired/guanzhu?usid=${this.usid}&uid=${this.uid}`).then(res=>{
                            if(res.data.code==-2){
                                this.$message.error(res.data.message);
                            }else if(res.data.code==1){
                           this.$message.success(res.data.message);
                          this.selectGuan();
                       }else{
                           this.$alert(res.data.message);
                       }
                    })
                }else if(this.guanzhu=="已关注"){
                    let flag=confirm("你确定要取消该博主？");
                    if(flag){
                        axios.post(`fired/quguanzhu?usid=${this.usid}&uid=${this.uid}`).then(res=>{
                          if(res.data.code==1){
                              this.$message.success(res.data.message);
                              this.selectGuan();
                          }else{
                              this.$message.ERROR(res.data.message);
                          }
                        })
                    }else{
                        alert("取消失败")
                    }
                }
            },
            //得到点击回复的id和名字
            getre(replayContent){
                this.replayContent.cid=replayContent.cid
                this.replayContent.uname=replayContent.uname;
              this.replayContent.content="回复"+this.replayContent.uname+"："

            },
            //查询该博主有没有收藏该blog
            selectFav(){
                axios.get(`favorite/selectFav?usid=${this.usid}&aid=${this.aid}`).then(res=>{
                    if(res.data.code==1){
                        this.favorite.fav=res.data.data;

                    }
                })
            },
            //增加浏览量
            addVie(){
              //  alert(22)
                console.log("uid"+this.uid);
                console.log("usid"+this.usid);
                if(this.userinfo==null||this.userinfo==''){

                }else{
                    console.log(this.artist)
                    if(this.uid!=this.usid){
                        axios.post("../../other/article/addView",this.artist).then(res=>{
                            axios.post(`getArtByid?aid=${this.aid}`).then(res=>{
                                this.artist=res.data.data.data;
                            })
                        })
                    }
                }
            },
            //收藏点击事件
           getFav(){
               if(this.userinfo==null||this.userinfo==''){
                   alert("你还没没有登录，请先登录在操作")
                   location.href="login.html";
                   return;
               }
                if(this.favorite.fav==null||this.favorite.fav==''){
                    axios.get(`favorite/addFav?usid=${this.usid}&aid=${this.aid}`).then(res=>{

                       this.selectFav();
                        this.$message.success(res.data.message);
                    })
                }else{
                    let flag=confirm("你确定要取消收藏？")
                    if(flag){
                        axios.get(`favorite/delFav?usid=${this.usid}&aid=${this.aid}`).then(res=>{
                         this.getArtByid();
                            this.selectFav();
                        })
                    }
                }
           },
            //打赏
            reward(index){
                this.rewardItem=index;

            },
            //打赏
            Play(){

                if(this.rewardItem==null||this.rewardItem==''){
                    alert("请选择你要打赏金额");
                }else{
                    axios.get(`user/userinfo/play?usid=${this.usid}&uid=${this.uid}&balance=${this.rewardItem}`).then(res=>{
                        console.log(res.data);
                        if(res.data.code==-2){
                            this.$message.error(res.data.message);
                        }else if(res.data.code==1){
                            this.$message.success(res.data.message);
                        }
                        this.rewardItem='';
                        this.dialogVisible=false;
                    })
                }
            },
            //判断当前blog是赞还是踩
            selectEvaluate(){
                axios.get(`evaluate/selectEvaluate?usid=${this.usid}&aid=${this.aid}`).then(res=>{
                    if(res.data.data==null){
                       return;
                    }
                    if(res.data.data.status==1){
                        this.evaluate.giveLike=true;
                    }else if(res.data.data.status==-2){
                        this.evaluate.stamp=true;
                    }
                })
            },
            //点赞或者踩
            downLike(index){
                if(this.userinfo==null||this.userinfo==''){
                   alert("你还没有登录请先进行登录");
                    location.href="login.html";
                    return;
                }
                if(index==1){
                    if(this.evaluate.giveLike){
                       var flag=confirm("你确定要取消点赞")
                        if(flag){
                            axios.get(`evaluate/delEvaluate?usid=${this.usid}&aid=${this.aid}&status=1`).then(res=>{
                                this.$message.success(res.data.message);
                                this.getArtByid();
                            })
                            this.evaluate.giveLike=!this.evaluate.giveLike;
                        }
                    }else{
                        axios.get(`evaluate/addEvaluate?usid=${this.usid}&aid=${this.aid}&status=1`).then(res=>{
                            this.$message.success(res.data.message);
                            this.getArtByid();
                        })
                        this.evaluate.giveLike=!this.evaluate.giveLike;
                        if(this.evaluate.stamp){
                            this.evaluate.stamp=false;
                        }

                    }
                }else{
                    if(this.evaluate.stamp){
                        axios.get(`evaluate/delEvaluate?usid=${this.usid}&aid=${this.aid}&status=-2`).then(res=>{
                            this.$message.success(res.data.message);
                            this.getArtByid();
                        })
                        this.evaluate.stamp=!this.evaluate.stamp

                    }else{
                        axios.get(`evaluate/addEvaluate?usid=${this.usid}&aid=${this.aid}&status=-2`).then(res=>{
                            this.$message.success(res.data.message);
                            this.getArtByid();
                        })
                        this.evaluate.stamp=!this.evaluate.stamp
                        if(this.evaluate.giveLike){
                            this.evaluate.giveLike=false;
                        }
                    }
                }
            },
            myinfo(){
                var jwt=sessionStorage.getItem("jwt");
                axios.get("blog-user/userinfo/myinfo",{
                    headers:{
                        Authorization: jwt,
                    }
                }).then(res=>{
                    if(res.data.code==-1){
                        this.userinfo=null;
                    }else{
                        this.loginedinfo=res.data.data;
                        this.usid=res.data.data.usid;

                        this.selectGuan();
                        this.selectFav();
                        this.addVie();
                        if(this.usid!=this.uid){
                            this.selectEvaluate();
                        }
                    }
                })
            },
            //查找该类型的blog
            getBlogByType(){
                axios.get(`getBlogByType?aid=${this.aid}&tid=${this.artist.tid}`).then(res=>{
                    this.Goodrecommendation=res.data.data;
                })
            },
            //查询发表blog前六名的博主
            getUserByMore(){
                axios.get(`fired/selectfired?usid=${this.userinfo.usid}`).then(res=>{
                    this.blogger=res.data.data;
                })
            },
            blogUserAttention(fid){
                axios.get(`fired/guanzhu?usid=${this.usid}&uid=${fid}`).then(res=>{
                   if(res.data.code==1){
                       this.$message.success(res.data.message);
                       this.getUserByMore();
                   }
                })
            }
        },
        created(){
            this.getAid();
            this.selectByid();

        },
        mounted() {
            this.getArtByid();
        },
    })
</script>
</body>
</html>